<template>
  <div class="rightView">
    <div class="top">
      <div class="title">全省天气预警</div>
      <div class="top-content">
        <div
          class="warning-item"
          v-for="(item, index) in warningData"
          :key="index"
        >
          <div :class="['item-left', item.level]">
            <img :src="`/guotuicon/${item.level}_${item.code}.jpg`" alt="" />
          </div>
          <div class="item-right">
            <div
              class="right-top"
              :style="{
                boxShadow: `inset 0px 0px 6px 1px ${warningColor[item.level]}`
              }"
            >
              {{ item.name }}
            </div>
            <div class="right-bottom">{{ item.num }}<span>条</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="title">数据统计</div>
      <div class="filter">
        <div class="filter-one">
          <div class="date-box">
            <el-date-picker
              v-model="time"
              type="daterange"
              :picker-options="pickerOptions"
              popper-class="date-picker-style"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="dateTimeChnage"
            />
          </div>
          <div class="city-box">
            <el-select
              v-model="cityData"
              placeholder="市"
              size="large"
              style="width: 150px"
              popper-class="cityOption"
            >
              <el-option
                v-for="item in cityOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </div>
          <div class="site-type-box">
            <el-select
              v-model="siteTypeData"
              placeholder="站点类型"
              size="large"
              style="width: 150px"
            >
              <el-option
                v-for="item in siteTypeOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="filter-two">
          <div class="code-box">
            <el-select
              v-model="codeData"
              placeholder="要素标识"
              size="large"
              style="width: 150px"
            >
              <el-option
                v-for="item in codeOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="sort-box">
            <el-select
              v-model="sortData"
              placeholder="排序类型"
              size="large"
              style="width: 150px"
            >
              <el-option
                v-for="item in sortOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </div>
      <div class="ranking">
        <div class="ranking-header">
          <div class="header-title">站点极值排行</div>
          <div class="ranking-box">
            <el-select
              v-model="rankingData"
              placeholder="排名"
              size="large"
              style="width: 150px"
            >
              <el-option
                v-for="item in rankingOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="ranking-echart" v-loading="loading">
          <VChart
            ref="chartRef"
            style="width: 585px"
            class="chart-content"
            :option="option"
          />
        </div>
      </div>
      <div class="table">
        <div class="ranking-header">
          <div class="header-title">站点极值表</div>
        </div>
        <div class="table-content" v-loading="loading">
          <div class="content-header">
            <div class="">市县</div>
            <div class="">站点名</div>
            <div class="">要素详情</div>
            <div class="">时间</div>
          </div>
          <div class="content-body">
            <div class="row" v-for="(item, index) in tableData" :key="index">
              <div>{{ item.cityCounty }}</div>
              <div>{{ item.stationName }}</div>
              <div>{{ item.elementValue }}</div>
              <div>{{ item.monitorTime }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import VChart from 'vue-echarts'
import * as echarts from 'echarts'
import apiList from './api/api'
import apiLists from '@/pages/integrated-monitoring/api/api'
const loading = ref(false)
const getSevenDaysAgoDate = num => {
  const currentDate = new Date()
  const sevenDaysAgo = new Date(
    currentDate.getTime() - num * 24 * 60 * 60 * 1000
  )
  const year = sevenDaysAgo.getFullYear()
  const month = String(sevenDaysAgo.getMonth() + 1).padStart(2, '0')
  const day = String(sevenDaysAgo.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}
const time = ref([getSevenDaysAgoDate(7), getSevenDaysAgoDate(0)])
const cityData = ref()
const siteTypeData = ref(0)
const codeData = ref('TEM')
const sortData = ref(2)
const rankingData = ref('排名数10')
const startTime = ref(getSevenDaysAgoDate(7))
const endTime = ref(getSevenDaysAgoDate(0))
const cityOptions = ref([])
const warningData = ref([])
const warningColor = ref({
  Bule: 'rgba(112, 112, 112, 1)',
  Red: 'rgba(255, 94, 0, 0.92)',
  Orange: 'rgba(255, 179, 0, 0.92)',
  Yellow: 'rgba(247, 255, 0, 0.92)'
})
const siteTypeOptions = ref([
  {
    name: '国家站',
    value: 0
  },
  {
    name: '区域站',
    value: 1
  }
])
const codeOptions = ref([
  {
    name: '气温',
    value: 'TEM'
  },
  {
    name: '降水',
    value: 'RAIN'
  },
  {
    name: '相对湿度',
    value: 'RH'
  },
  {
    name: '气压',
    value: 'PRS'
  },
  {
    name: '风',
    value: 'WIND'
  },
  {
    name: '能见度',
    value: 'VIS'
  }
])
const sortOptions = ref([
  {
    name: '最小值',
    value: 0
  },
  {
    name: '最大值',
    value: 1
  },
  {
    name: '平均值',
    value: 2
  }
])
const rankingOptions = ref([
  {
    name: '排名数10',
    value: 10
  },
  {
    name: '排名数20',
    value: 20
  }
])
const color = [
  {
    type: 'linear',
    x: 0,
    x2: 0,
    y: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(0, 109, 255, 1)'
      },
      {
        offset: 0.5,
        color: 'rgba(0, 109, 255, 1)'
      },
      {
        offset: 1,
        color: 'rgba(0, 109, 255, 1)'
      }
    ]
  }
]
const option = ref({
  color,
  grid: {
    show: true,
    backgroundColor: 'transparent',
    opacity: 1,
    borderWidth: '0',
    top: '10',
    left: '50',
    right: '10',
    bottom: '35'
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0,0,0,.6)',
    borderColor: 'rgba(147, 235, 248, 0)',
    textStyle: {
      color: '#FFF'
    }
  },
  xAxis: [
    {
      type: 'category',
      data: []
    }
  ],
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      barWidth: 15,
      type: 'bar'
    }
  ]
})
const pickerOptions = ref({
  disabledDate(time) {
    const now = new Date()
    return (
      time.getTime() < now.getTime() ||
      time.getTime() > now.getTime() + 7 * 24 * 60 * 60 * 1000
    ) // 当前时间之前和之后七天的时间均不可选
  }
})
const getCityData = async () => {
  let { data } = await apiLists.getCityList()
  cityOptions.value = [
    {
      name: '全部',
      code: '全部'
    },
    ...data
  ]
}
const getWarningTypeNumStatistics = () => {
  apiList.getWarningTypeNumStatistics().then(res => {
    warningData.value = res.data
  })
}
const tableData = ref()
const getHomeStatistics = () => {
  loading.value = true
  apiList
    .getHomeStatistics({
      cityCode: cityData.value,
      elementCode: codeData.value,
      startDate: startTime.value,
      endDate: endTime.value,
      sortType: sortData.value,
      stationType: siteTypeData.value
    })
    .then(res => {
      if (res.data) {
        let num = rankingData.value == '排名数10' ? 10 : rankingData.value
        let xAxisList = res.data.xAxis.slice(0, num)
        let dataList = res.data.data.slice(0, num)
        option.value.xAxis[0].data = xAxisList
        option.value.series[0].data = dataList
        tableData.value = res.data.tableList.slice(0, num)
      } else {
        ElMessage.error(res.msg)
      }
      loading.value = false
    })
}
watch(
  () => cityData.value,
  () => {
    getHomeStatistics()
  },
  { deep: true }
)
watch(
  () => codeData.value,
  () => {
    getHomeStatistics()
  },
  { deep: true }
)
watch(
  () => siteTypeData.value,
  () => {
    getHomeStatistics()
  },
  { deep: true }
)
watch(
  () => sortData.value,
  () => {
    getHomeStatistics()
  },
  { deep: true }
)
watch(
  () => rankingData.value,
  newV => {
    getHomeStatistics()
  },
  { deep: true }
)
const dateTimeChnage = time => {
  startTime.value = time[0]
  endTime.value = time[1]
  getHomeStatistics()
}
onMounted(() => {
  startTime.value = time.value[0]
  endTime.value = time.value[1]
  getWarningTypeNumStatistics()
  getCityData()
  getHomeStatistics()
})
</script>
<style lang="scss" scoped>
.rightView {
  width: 600px;
  height: calc(100% - 50px);
  position: absolute;
  top: 80px;
  right: 43px;
  z-index: 1200;
  .top {
    .top-content {
      width: 100%;
      height: 166px;
      display: grid;
      grid-template-columns: 170px 170px 170px; /* 定义三列，每列宽度为 100px */
      grid-template-rows: 73px 73px; /* 定义两行，每行高度为 100px */
      gap: 20px 26px; /* 列和行之间的间隔为 10px */
      margin-bottom: 10px;
      overflow-y: auto;
      .warning-item {
        width: auto;
        height: 67px;
        display: flex;
        .item-left {
          width: 74px;
          height: 67px;
          //   background: url(./images/Blue.png) no-repeat;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin-right: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 48px;
            height: 40px;
          }
        }
        .Blue {
          background-image: url(./images/Blue.png);
        }
        .Red {
          background-image: url(./images/Red.png);
        }
        .Orange {
          background-image: url(./images/Orange.png);
        }
        .Yellow {
          background-image: url(./images/Yellow.png);
        }
        .item-right {
          padding-top: 10px;
          .right-top {
            width: 77px;
            height: 24px;
            background-color: #392c00;
            border-radius: 2px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 300;
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
            text-align: center;
            margin-bottom: 2px;
          }
          .right-bottom {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: bold;
            font-size: 30px;
            color: #ffffff;
            line-height: 30px;
            text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
            text-align: center;
            font-style: normal;
            text-transform: none;

            span {
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              font-size: 12px;
              color: #ffffff;
              line-height: 0px;
              text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }
    }
  }
  .bottom {
    .filter {
      .filter-one {
        display: flex;
        .date-box,
        .city-box,
        .site-type-box,
        .code-box,
        .sort-box {
          width: 254px;
          height: 38px;
          background: rgba(2, 19, 43, 0.69);
          // box-shadow: inset 0px 0px 6px 1px #00b9ff;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid rgba(34, 249, 255, 0.23);
          margin-right: 20px;
        }
        .city-box,
        .site-type-box,
        .code-box,
        .sort-box {
          width: 150px;
        }
      }
      .filter-two {
        display: flex;
        justify-content: flex-start;
        margin-top: 5px;
        .code-box,
        .sort-box {
          width: 254px;
          height: 38px;
          background: rgba(2, 19, 43, 0.69);
          // box-shadow: inset 0px 0px 6px 1px #00b9ff;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid rgba(34, 249, 255, 0.23);
          margin-right: 20px;
        }
        .code-box,
        .sort-box {
          width: 150px;
        }
      }
    }
    .ranking {
      width: 100%;
      height: 250px;

      .ranking-echart {
        width: 100%;
        height: 210px;
      }
    }
    .ranking-header {
      width: 100%;
      height: 29px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 5px;
      box-sizing: border-box;
      margin-bottom: 10px;
      .header-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        line-height: 29px;
        text-align: center;
        position: relative;
        padding-left: 20px;
        box-sizing: border-box;
      }
      .header-title::after {
        content: '';
        width: 10px;
        height: 10px;
        background: #b1fffd;
        box-shadow: 0px 0px 9px 1px #00eeff;
        border: 2px solid #00ddff;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 55%;
        transform: translateY(-50%);
      }
      .ranking-box {
        background: rgba(2, 19, 43, 0.69);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid rgba(34, 249, 255, 0.23);
      }
    }
    .table {
      width: 100%;
      height: 215px;
      .table-content {
        width: 100%;
        height: calc(100% - 29px);
        padding-left: 20px;
        box-sizing: border-box;
        .content-header {
          width: 100%;
          height: 35px;
          div {
            width: 142px;
            height: 35px;
            background: url(./images/header.png) no-repeat;
            background-size: 100% 100%;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #96adc5;
            line-height: 35px;
            text-align: center;
            display: inline-block;
            margin-right: 3px;
            margin-bottom: 4px;
          }
        }
        .content-body {
          width: 100%;
          height: calc(100% - 35px);
          background: rgba(0, 13, 35, 0.48);
          box-shadow: inset 0px 0px 14px 1px rgba(0, 204, 255, 0.64);
          padding: 0 9px;
          box-sizing: border-box;
          overflow-y: auto;
          .row {
            width: 100%;
            height: 48px;
            border-bottom: 1px solid rgba(130, 140, 153, 0.17);
            div {
              width: 133.5px;
              height: 48px;
              margin-right: 3px;
              font-family: PingFang SC, PingFang SC;
              font-weight: 300;
              font-size: 14px;
              color: #ffffff;
              line-height: 48px;
              text-align: center;
              display: inline-block;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
  .title {
    width: 530px;
    height: 52px;
    background: url(./images/title.png) no-repeat;
    background-size: 100% 100%;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 21px;
    color: #ffffff;
    line-height: 52px;
    text-align: left;
    padding-left: 51px;
    margin-bottom: 15px;
  }
}
</style>
<style lang="scss">
.date-box {
  .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 92%;
    height: 100%;
  }
  .el-range-separator {
    color: #dde7ee;
  }
  .el-range-input {
    color: #fff;
  }
  .el-input__inner {
    color: #ffffff;
  }
  .date-picker-style .el-input__wrapper {
    border: 1px solid #101010;
  }
  .date-picker-style .el-input__inner {
    color: #000;
  }
}
.city-box {
  .el-input,
  .el-input__wrapper {
    width: 150px;
    height: 38px;
  }
  .el-select .el-input.is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px transparent;
  }
  .el-select {
    .el-input.is-focus .el-input__wrapper {
      box-shadow: 0 0 0 1px transparent;
    }
  }
}

.site-type-box {
  .el-input__wrapper {
    width: 150px;
    height: 38px;
  }
}
.code-box,
.sort-box {
  .el-input__wrapper {
    width: 150px;
    height: 38px;
  }
}
.el-select__popper.el-popper {
  background: rgba(2, 19, 43, 0.69);
  border: 1px solid rgba(34, 249, 255, 0.23);
}
.el-select-dropdown__item {
  color: #fff;
}
.el-select-dropdown__item:hover {
  background-color: #666;
}
</style>
